<template>
  <div class="tab">
    <router-link to="/recommend" tag="div" class="tab-item">
      <span class="tab-link">推荐</span>
    </router-link>
    <router-link to="/singer" tag="div" class="tab-item">
      <span class="tab-link">歌手</span>
    </router-link>
    <router-link to="/rank" tag="div" class="tab-item">
      <span class="tab-link">排行</span>
    </router-link>
    <router-link to="/search" tag="div" class="tab-item">
      <span class="tab-link">搜索</span>
    </router-link>
  </div>
</template>
<script>
export default {
  name: 'Tab'
}
</script>
<style lang="scss" scoped>
@import 'common/scss/variable.scss';
.tab{
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: relative;
  .tab-item{
    .tab-link{
        color: $color-text-ll;
        font-size: $font-size-large;
      }
  }
  .router-link-active{
    color: $color-theme;
    border-bottom: 2px solid $color-theme;
    .tab-link{
      color: $color-theme
    }
  }
}
</style>
